
/* 
1. 引入样式

<style>
    .page1 {
        width: 800px;
        height: 40px;
        border: solid 1px black;
        margin: 30px auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

2. 引入DIV
    div.page1 
3. 引入JS
<script src="路径/page.js"></script>

let page1 = new Page('.page1', {
    pageTag: {
        first: '首页',
        prev: '上一页',
        list: null,
        next: '下一页',
        last: '末页',
    },
    pageInfo: {
        pageNum: 1,     // 当前页数
        pageSize: 2,    // 每页显示条数  
        totalData: res.data.total, // 总条数 
        totalPage: 0,  // 总页数 = 向上取整（总条数 / 每页显示条数）
    },
    getDataFn: function (pageno) {
        console.log(pageno)
    }
})

*/


// 定义结构
function Page (el, options = {}) {
    // 公共属性
    this.el = document.querySelector(el)
    this.options = options

    // 启动
    this.init()
}

// 启动
Page.prototype.init = function () {
    // 动作
    // 绑定事件
    this.bindEvent()
    // 设置默认值
    // 创建分页标签
    this.createTag()
    // 创建分页页码（推荐 写在 创建分页标签 中 语义化  现有 创建分页标签 才能有 分页页码
    // ...
}

// 绑定事件
Page.prototype.bindEvent = function () {
    // 1. 获取【当前】盒子
    // 2. 绑定点击事件
    // this.el.onclick = function (e) {
    this.el.onclick = (e) => {
        // 3. 事件处理函数中（1更新页码，2清空当前盒子创建标签）

        // 3.1 获取evt、获取target
        let evt = e || window.event
        // 3.2 判断是不是P标签 nodeName
        let target = evt.target || evt.srcElement
        // console.log(target)
        // 3.3 还得判断是首页、还是下一页等等
        if (target.nodeName === 'P') {

            // console.log(target.innerText)

            // 首页
            // 上一页
            // 下一页
            // 末页

            // 数字
            // ...
            // 隐藏的P 里面有 【HTML、数字、...】  数字、...

            switch (target.innerText) {
                case this.options.pageTag.first:
                    this.options.pageInfo.pageNum = 1
                    break;
                case this.options.pageTag.prev:
                    if (this.options.pageInfo.pageNum === 1) return
                    this.options.pageInfo.pageNum--
                    break;
                case this.options.pageTag.next:
                    if (this.options.pageInfo.pageNum === this.options.pageInfo.totalPage) return
                    this.options.pageInfo.pageNum++
                    break;
                case this.options.pageTag.last:
                    this.options.pageInfo.pageNum = this.options.pageInfo.totalPage
                    break;
                default:
                    // 数字
                    // ...
                    // 隐藏的P 里面有 【HTML、数字、...】 

                    // console.log(target.innerText)
                    // console.log(target.innerHTML)

                    if (parseInt(target.innerHTML) > 0) {
                        // this.options.pageInfo.pageNum = target.innerHTML
                        // 留心：上述不能直接赋值
                        // 原因：只要从页面获取的数据就是字符串 ！！！
                        this.options.pageInfo.pageNum = parseInt(target.innerHTML)
                    }
                    break;
            }
            // 盒子内容重新渲染
            this.createTag()

            // 发送异步请求
            this.options.getDataFn(this.options.pageInfo.pageNum)
        }
    }

}

// 分页标签
Page.prototype.createTag = function () {
    // 0 清空盒子内容
    this.el.innerHTML = ''
    // 1 获取pageTag对象
    let pageTag = this.options.pageTag
    // 2 遍历pageTag对象 
    for (let key in pageTag) {
        this.createP('p', pageTag[key], this.el)
    }


    // TODO. 周一说具体原因
    let pObjs = this.el.querySelectorAll('p')
    if (this.options.pageInfo.pageNum === 1) {
        pObjs[0].style.cursor = 'not-allowed'
        pObjs[1].style.cursor = 'not-allowed'
    }

    if (this.options.pageInfo.pageNum === this.options.pageInfo.totalPage) {
        pObjs[3].style.cursor = 'not-allowed'
        pObjs[4].style.cursor = 'not-allowed'
    }

    // 3. 创建页码
    this.createNum()
}

// 分页页码
// 瑕疵1：去掉边框
// 瑕疵2：代码冗余
// 瑕疵3：默认选中
// 瑕疵4：页码算法（1 总页数不准确、2 总页数小于7
// 瑕疵5：总页数不准确
// 瑕疵6：总页数小于7
Page.prototype.createNum = function () {
    // 1 获取第3个分页标签
    let tag3Obj = this.el.querySelector('p:nth-child(3)')
    tag3Obj.style.border = 'none'
    tag3Obj.style.margin = '0px'
    tag3Obj.style.padding = '0px'
    // 2 循环创建6个页码 并 追加
    // 发现：当前页不同显示的效果也不同
    // 因此：判断当前是第几页 然后显示对应的效果
    // for (let i = 1; i <= 4; i++) {
    //     this.createP('p', i, tag3Obj)
    // }

    // 2. 循环创建p标签 追加到 1 中
    // for (let i = 1; i < 8; i++) {
    //     this.createP('p', i, tag3Obj)
    // }
    // 1 2 3 4 5 ... 99 100  	     pageNum < 5
    // 1 2 3 4 5 6 7 ... 99 100     pageNum == 5
    // 1 2 ... 4 5 6 7 8 .. 99 100  pageNum > 5 && pageNum < 总页数-4
    // 1 2 ... 96 97 98 99 100      pageNum >= 总页数-4
    let pageNum = this.options.pageInfo.pageNum
    this.options.pageInfo.totalPage = Math.ceil(this.options.pageInfo.totalData / this.options.pageInfo.pageSize)
    let totalPage = this.options.pageInfo.totalPage

    if (totalPage < 7) {
        for (let i = 1; i <= totalPage; i++) this.createP('p', i, tag3Obj)
    } else if (pageNum < 5) {
        for (let i = 1; i <= 5; i++) this.createP('p', i, tag3Obj)
        this.createP('p', '...', tag3Obj)
        this.createP('p', totalPage - 1, tag3Obj)
        this.createP('p', totalPage, tag3Obj)
    } else if (pageNum == 5) {
        for (let i = 1; i <= 7; i++) this.createP('p', i, tag3Obj)
        this.createP('p', '...', tag3Obj)
        this.createP('p', totalPage - 1, tag3Obj)
        this.createP('p', totalPage, tag3Obj)
    } else if (pageNum > 5 && pageNum < totalPage - 4) {
        for (let i = 1; i <= 2; i++) this.createP('p', i, tag3Obj)
        this.createP('p', '...', tag3Obj)
        this.createP('p', pageNum - 2, tag3Obj)
        this.createP('p', pageNum - 1, tag3Obj)
        this.createP('p', pageNum, tag3Obj)
        this.createP('p', pageNum + 1, tag3Obj)
        this.createP('p', pageNum + 2, tag3Obj)
        this.createP('p', '...', tag3Obj)
        this.createP('p', totalPage - 1, tag3Obj)
        this.createP('p', totalPage, tag3Obj)
    } else if (pageNum >= totalPage - 4) {
        for (let i = 1; i <= 2; i++) this.createP('p', i, tag3Obj)
        this.createP('p', '...', tag3Obj)
        for (let i = totalPage - 4; i <= totalPage; i++) this.createP('p', i, tag3Obj)
    }
}

Page.prototype.createP = function (tagName, content, fatherObj) {

    // 创建标签
    let pObj = document.createElement(tagName)
    pObj.innerText = content
    pObj.style.border = 'solid 1px black'
    pObj.style.margin = '0 5px'
    pObj.style.padding = '0 5px'
    pObj.style.display = 'inline-block'
    // 默认选中页码
    if (content === this.options.pageInfo.pageNum) pObj.style.background = 'orange'
    // 3 将 标签 追加到 【当前】盒子中
    fatherObj.appendChild(pObj)
}